今天要來介紹類別實作介面，
介面型別我覺得很大的一個優勢是可以重複使用，
因此我們就來說說這個吧。

什麼時候可以共用相同的介面型別呢？

傳入的參數相同，透過不同函式得到某個共同所需的值就可以拿出來當介面型別共用了

舉例來說，
我要取得一個長方形的面積，
那麼我就必須傳入長、寬的參數，
透過長x寬的函式，
得到正方形的面積。

再來，
我要取得一個三角形的面積，
那麼我就必須傳入長、寬的參數，
透過長x寬/2的函式，
得到三角形的面積。

可見要取得長方形和三角形的面積，
都需要傳入長、寬的參數，
並透過各自的函式，
來取得面積。

使用範例

程式碼範例如下，

首先宣告一個Shape介面型別，
使用介面來定義函式型別，如下；

interface Shape {
    (w: number, h: number): number;
}

其中，
(w: number, h: number)為傳入的參數與型別，
冒號後面的number為傳出資料的型別。

類別實作介面 - 長方形(Rectangle)

那麼先以**長方形(Rectangle)**為例，

//類別實作介面
class Rectangle implements IShape {

    //屬性(Property)
    width: number;
    height: number;

    //建構函式(Constructor)
    constructor(w: number, h: number) {
        this.width = w;
        this.height = h;
    }

    //函式(Function)
    getArea() {
        return this.width * this.height;
    }
}

要將類別實作介面就在後別後方加上implements及欲實作見面的名稱，
裡面的成員就跟一般宣告類別一樣，
特別需樣注意的是實作的介面參數必須與類別中的參數一致喔。

類別實作介面 - 三角形(Triangle)

再來我們看到**三角形(Triangle)**的類別實作介面範例，

//類別實作介面
class Triangle implements IShape {

    //屬性(Property)
    width: number;
    height: number;

    //建構函式(Constructor)
    constructor(w: number, h: number) {
        this.width = w;
        this.height = h;
    }

    //函式(Function)
    getArea() {
        return ( this.width * this.height / 2 );
    }
}

其實可以看到正方形與三角形的類別實作介面其實幾乎一模一樣，
差別只在類別名稱與函式不同而已，
那麼這兩項在這就可以就共用介面IShape了，
如範例所示。

呼叫使用

呼叫方法與類別相同，如下，

let rec = new Rectangle(10, 20);
let tri = new Triangle(10, 20);

console.log(rec.getArea()); //200
console.log(tri.getArea()); //100

如此一來，就能得到需要的面積植了喔!

今日結語

介面(Interface)的重複使用希望大家都理解了，
但建立共用介面要考量的邏輯依專案的不同，
也是相當繁瑣的一件事，
雖說多了一些開發成本，
相對也就少一些維護成本，
一體兩面，
大家自己斟酌囉，
加油加油。